<template>
    <div id="app" v-if="mainStore.isLoading" @click="mainStore.isLoading=!mainStore.isLoading">
        <div class="loading-main">
            <div class="loading-gif"></div>
        </div>
    </div>
</template>

<script setup>
import useMainStore from '@/store/modules/mainStore';
const mainStore = useMainStore()
</script>
 
<style lang="less" scoped>
#app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
    z-index: 10;
    .loading-main {
        width: 110px;
        height: 110px;
        background-image: url(@/assets/img/home/loading-bg.png);
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .loading-gif{
            margin-top: -10px;
            width: 90px;
            height: 90px;
            background: url(@/assets/img/home/full-screen-loading.gif);
            background-size: 80%;
            background-position: center;
            background-repeat: no-repeat;
        }
    }
}
</style>